<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS margin and  padding </title>
<style>
.margin_wrap{
background: #AEEEEE;
height: 200px;
}
 
.margin_left,.margin_right {
float: left;
height: 40px;
background:#668B8B;
}
.margin_top,.margin_bottom{ 
background:#96CDCD;
padding-left:100px;
}
.margin_bottom{ 
clear:both;
}
 
.margin_eg{
background: #00C5CD ;
width: 20px;
height: 20px;
float: left;
text-align: center;
}

</style>
</head>
<body>

<h1> 内边距 外边距设置  </h1>

<h2>margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。</h2>

<!--  -->
margin: 20px;
=<br>
margin-top:20px;&nbsp; margin-right:20px;&nbsp;    margin-bottom:20px;&nbsp;    margin-left:20px;&nbsp;
<div class="margin_wrap">
 <div class="margin_top"> margin_top </div>
 <div class="margin_left"> margin_left   </div> 
 <div class="margin_eg" style="margin: 20px;">&nbsp; </div>
 <div class="margin_right"> margin_right </div>
 <div class="margin_bottom"> margin_bottom  </div>
</div>

<hr>
<!--  -->
margin:  20px 40px;
=<br>
margin-top:20px;&nbsp; margin-right:40px;&nbsp;    margin-bottom:20px;&nbsp;    margin-left:40px;&nbsp;
<div class="margin_wrap">
 <div class="margin_top"> margin_top </div>
 <div class="margin_left"> margin_left  </div> 
 <div class="margin_eg" style="margin: 20px 40px;">&nbsp; </div> 
 <div class="margin_right"> margin_right </div>
 <div class="margin_bottom"> margin_bottom  </div>
</div>

<hr>
<!--  -->
margin: 20px 40px 80px;
=<br>
margin-top:20px;&nbsp; margin-right:40px;&nbsp;    margin-bottom:80px;&nbsp;    margin-left:40px;&nbsp;
<div class="margin_wrap">
 <div class="margin_top"> margin_top  </div>
 <div class="margin_left"> margin_left </div> 
 <div class="margin_eg" style="margin: 20px 40px 80px;">&nbsp; </div>
 <div class="margin_right"> margin_right </div>
 <div class="margin_bottom"> margin_bottom </div>
</div>

<hr>
<!--  -->
margin:  20px 40px 80px 160px;"
=<br>
margin-top:20px;&nbsp; margin-right:40px;&nbsp;    margin-bottom:80px;&nbsp;    margin-left:160px;&nbsp;
<div class="margin_wrap">
 <div class="margin_top"> margin_top </div>
 <div class="margin_left"> margin_left </div> 
 <div class="margin_eg" style="margin: 20px 40px 80px 160px;">&nbsp; </div>
 <div class="margin_right"> margin_right  </div>
 <div class="margin_bottom">  margin_bottom  </div>
</div>


<h2>padding 简写属性在一个声明中设置所有内边距属性。</h2>


</body>
</html>